<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-25 09:37:12
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-03-05 09:50:03
 * @FilePath: \hbzc-groupmeal-center-web\src\centerViews\recipePlan\recipeTemplate\index.vue
-->
<template>
  <div class="app-container flex flex-col">
    <pb-card class="mb-4">
      <p class="tit mb-4">周菜谱开始日期设置</p>
      <div class="flex items-center">
        <span class="txt-css">
          每周
        </span>
        <pb-select class="ml-2 mr-2" v-model="weekVal" :options="selectList" keys="value" width="120"
          @change="changeBegin"></pb-select>
        <span class="txt-css">
          生成周菜谱
        </span>
        <span class="tips">
          <pb-icon name="info" color="#00000073"></pb-icon>
          该参数适用于食谱生成和食谱模板
        </span>
      </div>
    </pb-card>

    <div class="flex-1" v-loading="loading">
      <pb-card padding="0 16px 16px 16px" height="100%">
        <el-tabs v-model="curTab" class="demo-tabs">
          <el-tab-pane :name="1" label="菜谱生成参数设置">
            <CreateConfig :weekVal="weekVal" ref="configRef"></CreateConfig>
          </el-tab-pane>
          <el-tab-pane :name="2" label="投入产出比设置">
            <ProductionRatio></ProductionRatio>
          </el-tab-pane>
          <el-tab-pane :name="3" label="损耗成本设置">
            <lossCost></lossCost>
          </el-tab-pane>
        </el-tabs>
      </pb-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRecipeBegin, setRecipeBegin, } from '@/api/Recipe'

import { createMessage } from '@/Public-UIlibrary/pb-message/method';
import { useDebounceFn, useThrottleFn } from "@vueuse/core";

import lossCost from './components/lossCost.vue';
import createConfig from './components/createConfig.vue';
import productionRatio from './components/productionRatio.vue';

const curTab = ref(1)

const weekVal = ref(null)
const selectList = reactive([
  { label: '周一', value: 1 }, { label: '周二', value: 2 }, { label: '周三', value: 3 }, { label: '周四', value: 4 }, { label: '周五', value: 5 }, { label: '周六', value: 6 }, { label: '周日', value: 7 },])




// 获取开始日期
const getRecipeBeginApi = () => {
  return new Promise<void>((resolve, reject) => {
    getRecipeBegin().then(res => {
      if (res.code == 2000) {
        weekVal.value = res.data.beginWeek
        resolve(weekVal.value)
      }
    })
  })
}

// 设置开始日期
const changeBegin = (data) => {
  setRecipeBegin({ beginWeek: data[0].value }).then(res => {
    if (res.code == 2000) {
      createMessage({
        message: '开始日期设置成功'
      })
    }
  })
}

const configRef = ref(null)
onMounted(() => {
  getRecipeBeginApi().then(res => {
    configRef.value.onInit(res)
  })
})
</script>

<style lang="scss" scoped>
::v-deep .el-tabs,
.el-tabs__content,
.el-tab-pane {
  height: 100%;
}

::v-deep .el-tabs__item {
  color: rgba(0, 0, 0, 0.65);
}

::v-deep .el-tabs__item.is-active {
  color: var(--pb-color-primary);
}

::v-deep .el-table .el-table__cell {
  z-index: auto !important;
}


.tit {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
}

.tit-shadow {
  padding: 16px;
  box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.txt-css {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 24px;

}

.tips {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  line-height: 22px;
  margin-left: 12px;
}

.left-box {
  height: 100%;
  width: 200px;
  padding: 16px;
  box-sizing: border-box;
  box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.1)
}

.right-box {
  padding: 16px;
  box-sizing: border-box;
  width: calc(100% - 200px);
}

.week-item {
  height: 48px;
  text-align: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 48px;
  border-radius: 4px;
  margin-bottom: 16px;
  cursor: pointer;
}

.active-week {
  background: #0D968B;
  color: #FFFFFF;
}

.static-box {
  width: 88%;
  display: flex;
  align-items: center;
  margin: 6px 0 16px 0;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC;

  .static-item {
    margin-right: 24px;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;

    span {
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
    }
  }
}
</style>